<template>
  <div class="download-page">
    <a id="download-model" :href="download.url"></a>
    <div class="content-box">
      <div class="img-arror"><img :src="getRequireImg('L@2x')" alt="" /></div>
      <div class="container">
        <div class="label">
          <div class="img1"><img :src="getRequireImg('2@2x')" alt="" /></div>
          <div class="text">未受信任的企业版安装指南</div>
          <div class="img2"><img :src="getRequireImg('1@2x')" alt="" /></div>
        </div>
        <div class="content">
          <div class="group">
            <div class="left-text">
              <div class="left-label">
                <span class="img"></span>
                <span class="txt">01</span>
              </div>
              <div class="tips">首次安装的用户，请前往<span>"设置"-"通用"-"设备管理"</span>选择要安装的应用点击进入。</div>
            </div>
            <div class="right-img">
              <img :src="getRequireImg('you-tu1@2x')" alt="" />
            </div>
          </div>
          <div class="division">
            <img :src="getRequireImg('jian-tou@2x')" alt="" />
          </div>
          <div class="group">
            <div class="center-img"><img :src="getRequireImg('tong-yong2@2x')" alt="" /></div>
          </div>
          <div class="division">
            <img :src="getRequireImg('jian-tou@2x')" alt="" />
          </div>
          <div class="group">
            <div class="left-text">
              <div class="left-label">
                <span class="img"></span>
                <span class="txt">02</span>
              </div>
              <div class="tips">选择要信任的企业级文件，点击<span>"信任"</span>返回桌面，打开应用即可正常使用。</div>
            </div>
            <div class="right-img">
              <img :src="getRequireImg('you-tu3@2x')" alt="" />
            </div>
          </div>
          <div class="division">
            <img :src="getRequireImg('jian-tou@2x')" alt="" />
          </div>
          <div class="group">
            <div class="center-img"><img :src="getRequireImg('tu4@2x')" alt="" /></div>
          </div>
        </div>
      </div>
      <div class="footer">
        <p>最终额度及放款时长因个人资质而定</p>
        <p>贷款有风险，借款需谨慎。请根据个人能力合理贷款</p>
        <p class="icp">ICP备案123617823618273</p>
      </div>
    </div>
    <div class="bottom-btn-box">
      <div class="button" @click="goDownload">正在下载，请返回桌面查看</div>
    </div>
  </div>
</template>
<script>
/*global $ returnCitySN require ClipboardJS wx err process*/
import { getImg } from "@/service/util.helper";
export default {
  data() {
    return {
      download: {
        url: "",
        show: false,
      },
    };
  },
  created() {
    this.download.url = sessionStorage.getItem("download_url");
  },
  methods: {
    getRequireImg(name, is64 = 0) {
      let imgObj = {
        name: name,
        is64: is64,
        download_page: 17,
        flooring_page: 167,
      };
      return getImg(imgObj);
    },
    goDownload() {
      console.log("下载成功");
      $("#download-model")[0].click();
    },
  },
};
</script>
<style lang="scss" scoped>
.download-page {
  background-image: linear-gradient(#56b0ff, #c9e6fe);
  min-height: 100vh;
  .content-box {
    img {
      max-width: 100%;
      display: block;
    }
    .img-arror {
      width: calc(149px / 2);
      margin: 0 auto 10px;
    }
    .container {
      background-color: #fff;
      border-radius: 12px;
      margin: 0 12px;
      padding: 12px;
      position: relative;
      .label {
        position: absolute;
        top: -16px;
        justify-content: center;
        display: flex;
        left: 0;
        right: 0;
        .img1 {
          width: 278px;
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          margin: auto;
          z-index: 1;
        }
        .text {
          font-size: 18px;
          font-weight: bold;
          color: #fff;
          position: relative;
          height: 42px;
          line-height: 42px;
          z-index: 3;
          text-align: center;
        }
        .img2 {
          width: 260px;
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          margin: auto;
          z-index: 2;
        }
      }
      .content {
        border: 1px dashed #3478f2;
        border-radius: 12px;
        min-height: 100vh;
        padding: 48px 12px 24px;
        .division {
          width: 26px;
          margin: 12px 53px 10px auto;
          justify-content: flex-end;
          display: flex;
        }
        .group {
          display: flex;
          justify-content: center;
          align-items: center;
          .left-text {
            flex: 1;
            .left-label {
              color: #3477f6;
              font-size: 36px;
              height: 50px;
              display: flex;
              align-items: center;
              justify-content: flex-start;
              margin-bottom: 12px;
              .img {
                border: 2px solid #558cef;
                border-radius: 2px;
                width: 20px;
                height: 20px;
                transform: rotate(45deg);
                margin-right: 10px;
                margin-left: 5px;
              }
              .txt{
                font-weight: bold;
              }
            }
            .tips {
              font-size: 16px;
              color: #333;
              text-align: justify;
              line-height: 22px;
              span {
                color: #3477f6;
              }
            }
          }
          .right-img {
            width: 131px;
            margin-left: 24px;
          }
          .center-img {
            width: 305px;
          }
        }
      }
    }
    .footer {
      padding: 35px 0 120px;
      color: #3478f2;
      p {
        display: block;
        margin: 0;
        height: 17px;
        line-height: 17px;
      }
    }
  }
  .bottom-btn-box {
    background-color: #fff;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 80px;
    display: flex;
    align-items: center;
    padding: 0 25px;
    .button {
      height: 44px;
      width: 100%;
      background-color: #3478f2;
      border-radius: 8px;
      color: #fff;
      font-size: 18px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}
</style>
